<template>
    <div class="login-page">
      <div class="banner">
      <img class="login-banner" src="../../assets/img/banner.png" alt="">
      </div>
      <div class="operation">
         <span :class="{login_checked:isChecked}" @click="switched_type(1)">用戶登錄</span>
         <span :class="{login_checked:!isChecked}" @click="switched_type(2)">用戶注冊</span>
      </div>
      <div class="login-register">
           <div class="input-item">
                <span class="star">*</span>
                <span>郵&nbsp;&nbsp;&nbsp;&nbsp;箱</span>
             <input type="email"  v-model="email" placeholder="請輸入郵箱">
           </div>
        <div class="input-item">
          <span class="star">*</span>
          <span>密&nbsp;&nbsp;&nbsp;&nbsp;碼</span>
          <input type="password" v-model="password" placeholder="請輸入密碼">
        </div>
        <router-link to="/forget">
        <p v-if="isChecked" class="forget-pwd">忘記密碼</p>
        </router-link>
        <mt-button @click="wentLogin" v-if="isChecked" type="primary" class="login-submit">登錄</mt-button>
<!--       注册 -->
        <div class="input-item" v-if="!isChecked">
          <span class="star">*</span>
          <span id="msg-code">驗證碼</span>
          <input type="text" v-model="msg_code" placeholder="請輸入郵箱驗證碼">
          <div class="get-code-btn" @click="wentCode()" v-show="show">獲取驗證碼</div>
          <div class="get-code-btn"  v-show="!show">{{count}}s</div>
        </div>
        <div class="input-item" v-if="!isChecked">
          <span class="star">*</span>
          <span style="margin-right: 0" id="msg-code">注冊碼</span>
          <input type="text" v-model="oid" placeholder="請輸入注册码">
        </div>
        <mt-button v-if="!isChecked" type="primary" class="login-submit" :style="{marginTop:'64px'}" @click="wentRegister">注冊</mt-button>
      </div>
    </div>
</template>

<style scoped>
  .banner{
    width: 100%;
    height: 210px;
    position: relative;
    background: #2a62cc;
  }

  .login-banner{
    position: absolute;
    top: 20px;
    left: 110px;
    width:150px;
    height:150px;
    display:block;
  }
  .get-code-btn{
    width:89px;
    height:34px;
    text-align:center;
    line-height:34px;
    color:#409EFF;
    background:#B3D8FF;
    margin-left:10px;
    cursor: pointer;
    font-size:11px;
    font-weight:normal;
  }

  .login-submit{
    width:100%;
    height:46px;
    margin-top:26px;
    background: #409EFF;
    color:#FFFFFF;
    font-weight: 100;
    font-size:16px;
  }

  /*.login-register{*/
  /*  margin-top:64px;*/
  /*}*/
  .login-register .forget-pwd{
    padding-top:16px;
    color:#FF0000;
    font-size:12px;
    font-weight: normal;
    float:right;
  }
  .login-register .input-item .star{
    color:#F56C6C;
    margin-right:6px;
    margin-top:2px;
  }
  .login-register .input-item span:nth-child(2){

    width:72px;
    margin-right:11px;
  }
  .login-register .input-item #msg-code{
    width:80px;
  }
  .login-register .input-item .yzm{
    width:65px;
    height:34px;
    padding-left:10px;
    padding-right:24px;

  }
  .login-register{
    font-size:14px;
    padding:19px 15px 0;
    font-weight:bold;
    color:rgba(31,31,31,1);
  }
  .login-register .input-item{
    margin-bottom:10px;
    display:flex;
    align-items: center;
    height:36px;
  }
  .login-register .input-item input{
    flex:1;
    padding-left:11px;
    color:#C0C4CC;
    font-size:11px;
    height:34px;
    border: 1px solid #C0C4CC;
  }
    /*.mint-header{*/
    /*  background:rgba(236,240,245,1);*/
    /*  font-size:15px;*/
    /*  font-weight:bold;*/
    /*  color:rgba(0,0,0,1);*/
    /*  height:88px;*/
    /*}*/

  .operation{
    width:100%;
    height:59px;
    background: url(../../assets/operation_bg.png) no-repeat left top;
    background-size: 100% 100%;
    font-size:15px;
    color:#000000;
    display:flex;
    align-items: center;
    justify-content: center;
    font-weight:400;
  }
  .operation span{
    display:flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height:100%;
  }
  .operation .login_checked{
     background:url("../../assets/icon/triangle.png") center 47px no-repeat;
  }

</style>
<script>
  import {goLogin} from 'api/login'
  import {goCode} from 'api/getCode'
  import {goRegister} from "api/register";
  import { Field , Header ,Button,MessageBox} from 'mint-ui';
  import Vue from 'vue';
  Vue.component(Header.name, Header);
  Vue.component(Field.name, Field);
  Vue.component(Button.name, Button);
  export default {
    name: 'login',
    data(){
      return  {
        isChecked:true,
          email:'',
        password:'',
        code:'',
        msg_code:'',
        codeSrc:'',
        show:true,
        count: '',
        timer: null,
          oid:''

      }
    },
    mounted() {
      if (window.localStorage.getItem('userInfo')){
        // this.$cookies.set('userInfo',data.data);
          this.$router.push({path:'/index'})
      }

    },
    methods:{
      //登录注册切换
      switched_type(type){
        if(type==1){
          this.isChecked=true;
        }else{
          this.isChecked=false;
        }

      },


      // 用户登录
      wentLogin(){
          var	mailReg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
          if (this.email==''){
              MessageBox.alert('郵箱不能为空');
              return
          }
          if (mailReg.test(this.email)==false){
              MessageBox.alert('郵箱格式错误');
              return
          }
         if (this.password==''){
             MessageBox.alert('密码不能为空');
             return
         }
              goLogin({username:this.email,upwd:this.password}).then((data)=>{

                  if (data.errorCode==0){
                    window.localStorage.setItem('userInfo',JSON.stringify(data.data))
                     // this.$cookies.set('userInfo',data.data);
                      MessageBox.alert('登录成功').then(action => {
                          this.$router.push({path:'/index'})
                      });

                  }else {
                      MessageBox.alert(data.msg)
                  }
              })
      },
      // 用户获取注册验证码

      wentCode(){

          if (this.email==''){
              MessageBox.alert('郵箱不能为空')
        }else {
              goCode({mail:this.email}).then((data)=>{
                  if (data.errorCode!=0){
                      MessageBox.alert(data.msg)
                  }else {
                      const TIME_COUNT = 60;
                      if (!this.timer) {
                          this.count = TIME_COUNT;
                          this.show = false;
                          this.timer = setInterval(() => {
                              if (this.count > 0 && this.count <= TIME_COUNT) {
                                  this.count--;
                              } else {
                                  this.show = true;
                                  clearInterval(this.timer);
                                  this.timer = null;
                              }
                          }, 1000)

                      }
                  }
              });

          }




      },
        // 用户注册

      wentRegister(){

              var	mailReg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
              if (this.email==''){
                  MessageBox.alert('郵箱不能为空');
                  return
              }
              if (mailReg.test(this.email)==false){
                  MessageBox.alert('郵箱格式错误');
                  return
              }
              if (this.password==''){
                  MessageBox.alert('密码不能为空');
                  return
              }

              goRegister(
                  {mail:this.email,
                      upwd:this.password,
                      mailcode:this.msg_code,
                      oid:this.oid
                  }).then((data)=>{
                  if (data.errorCode!=0){
                      MessageBox.alert(data.msg)
                  }else {
                      MessageBox.alert(data.msg).then(action => {
                          this.isChecked=true
                      });
                  }
              })
          }

    },


  }
</script>
